<template>
	<view>
		<view class="published_box">
			<view class="toggle_box">
				<view :class="[{'active':published_index == index}, 'toggle_item']" v-for="(item, index) in published"
					:key="index" @click="toggle_published(index)">{{item}}</view>
			</view>
			<view class="empty_box" v-if="dataList.length == 0 && isLoading == false">
				<image src="@/static/index/emptyBox.png"></image>
				<text>什么都没有</text>
			</view>
			<dataItem :dataList="dataList" :disabled="false" :type="published_index == 0?'all':'onlyDel'"></dataItem>
			<!-- 内容提示 -->
			<view class="bottom" v-if="isLoadedAll">
				———— 我也是有底线的 ————
			</view>
		</view>
	</view>
</template>

<script>
	import dataItem from '@/components/dataItem/dataItem.vue'

	const app = getApp()

	export default {
		name: 'myPublished',
		props: {
			dataItem
		},
		data() {
			return {
				// 当前删除信息的状态,默认为0
				del_index: 0,
				// 我的发布的分栏
				published: ['已发布', '已被找回'],
				// 当前分栏的index值
				published_index: 0,
				// 是否全部加载完成
				isLoadedAll: false,
				// 正在触底加载
				isLoading: false,
				// 数据总数
				total: 0,
				// 当前页数
				pageNum: 0,
				// 固定获取的数量
				numbers: 8,
				// 用户信息
				userInfo: {},
				// 数据列表
				dataList: [],
				// 数据数组
				dataArray: []
			}
		},
		methods: {
			// 切换我的发布的分栏
			toggle_published(index) {
				this.published_index = index
				this.del_index = index
				uni.pageScrollTo({
					scrollTop: 0
				}).then(res => {
					this.init()
				})
			},

			// 初始化函数
			init() {
				this.isLoading = true
				uni.showLoading({
					title: '加载中...'
				})
				this.isLoadedAll = false
				this.pageNum = 0
				this.dataList = []
				this.dataArray = []
				this.userInfo = app.globalData.userInfo
				// 如果当前的分栏是 已发布
				if (this.published_index == 0) {
					// 获取数据信息
					this.get_total().then(res => {
						console.log(res);
						this.dataArray = res.result.data[0].published
						this.total = res.result.data[0].published.length
						if (this.total != 0) {
							this.get_info()
						} else {
							uni.hideLoading()
							uni.stopPullDownRefresh()
							// 节流阀关闭
							this.isLoading = false
						}
					})
				} else {
					// 如果当前分栏是 已被找回
					// 获取数据信息
					this.get_total().then(res => {
						console.log(res);
						this.dataArray = res.result.data[0].recovered
						this.total = res.result.data[0].recovered.length
						if (this.total != 0) {
							this.get_info()
						} else {
							uni.hideLoading()
							uni.stopPullDownRefresh()
							// 节流阀关闭
							this.isLoading = false
						}
					})
				}

			},

			// 获取我的发布-已发布数据的总数
			get_total() {
				return new Promise(resolve => {
					wx.cloud.callFunction({
						name: 'get_total',
						data: {
							UID: this.userInfo.profile.student_ID
						}
					}).then(res => {
						resolve(res)
					})
				})
			},

			// 获取我的发布-已发布数据
			get_info() {
				wx.cloud.callFunction({
					name: 'get_info',
					data: {
						dataArray: this.dataArray,
						numbers: this.numbers,
						dataList_len: this.dataList.length,
						total: this.total
					}
				}).then(res => {
					console.log(res);
					uni.hideLoading()
					uni.stopPullDownRefresh()
					// 节流阀关闭
					this.isLoading = false
					this.dataList = [...this.dataList, ...res.result]
					this.pageNum++
					// 判断是否加载完成
					if (this.total != 0 && this.pageNum * this.numbers >= this.total) {
						return this.isLoadedAll = true
					}
				})
			},

			// 获取我的发布-已被找回数据的总数
			get_total() {
				return new Promise(resolve => {
					wx.cloud.callFunction({
						name: 'get_total',
						data: {
							UID: this.userInfo.profile.student_ID
						}
					}).then(res => {
						resolve(res)
					})
				})
			},

			// 获取我的发布-已被找回数据
			get_info() {
				wx.cloud.callFunction({
					name: 'get_info',
					data: {
						dataArray: this.dataArray,
						numbers: this.numbers,
						dataList_len: this.dataList.length,
						total: this.total
					}
				}).then(res => {
					console.log(res);
					uni.hideLoading()
					uni.stopPullDownRefresh()
					// 节流阀关闭
					this.isLoading = false
					this.dataList = [...this.dataList, ...res.result]
					this.pageNum++
					// 判断是否加载完成
					if (this.total != 0 && this.pageNum * this.numbers >= this.total) {
						return this.isLoadedAll = true
					}
				})
			}
		},
		onLoad() {
			this.init()
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.init()
		},
		// 触底加载
		onReachBottom() {
			// 节流阀
			if (this.isLoading) {
				return 0
			}
			// 判断是否加载完成
			if (this.pageNum * this.numbers >= this.total) {
				return this.isLoadedAll = true
			}
			uni.showLoading({
				title: '加载中...'
			})
			// 节流阀开启
			this.isLoading = true
			this.get_info()
		}
	}
</script>

<style scoped lang="scss">
	.published_box {
		width: 100vw;
		display: flex;
		flex-direction: column;
		align-items: center;

		.empty_box {
			width: 100vw;
			height: 80vh;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: relative;

			image {
				margin-top: -150rpx;
				width: 300rpx;
				height: 300rpx;
			}

			text {
				color: #B3B3B3;
				font-size: 32rpx;
			}
		}

		.toggle_box {
			position: sticky;
			top: 0;
			z-index: 100;
			width: 100vw;
			height: 100rpx;
			background-color: #d3b8a7;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding: 0 30rpx;

			.toggle_item {
				width: 180rpx;
				height: 48rpx;
				margin-right: 20rpx;
				border-radius: 100rpx;
				background-color: #edf1fd;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32rpx;
				color: #504F54;
				font-weight: bold;
			}

			.active {
				background-color: #014da1;
				color: white;
			}
		}

		.bottom {
			margin: 30rpx 0 100rpx 0;
			font-size: 24rpx;
			color: #B3B3B3;
		}
	}
</style>
